<template>
  <div class="info-container">
    <van-cell-group>
      <van-field
        v-model="state.fromData.gddz"
        name="name"
        label-align="top"
        readonly
        label="名称"
      />
      <div class="special">
        <van-button type="primary" block @click="onView">查看定位</van-button>
      </div>
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label="所属分区"
        label-align="top"
        readonly
      />
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label="区县"
        label-align="top"
        readonly
      />
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label="所属街道"
        label-align="top"
        readonly
      />
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label-align="top"
        readonly
        label="经度"
      />
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label-align="top"
        readonly
        label="纬度"
      />
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label-align="top"
        readonly
        label="地址"
      />
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label-align="top"
        readonly
        label="是否安装水位标尺"
      />
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label-align="top"
        readonly
        label="是否安装液位计等感知设备"
      />
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label-align="top"
        readonly
        label="是否安装摄像头"
      />
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label-align="top"
        readonly
        label="点位类型"
      />
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label-align="top"
        readonly
        label="风险等级"
      />
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label-align="top"
        readonly
        label="历史重现期（年）"
      />
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label-align="top"
        readonly
        label="阈值(mm/2h)"
      />
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label-align="top"
        readonly
        label="积水成因"
      />
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label-align="top"
        readonly
        label="影响河流"
      />
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label-align="top"
        readonly
        label="城市排水防涝安全责任人"
      />
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label-align="top"
        readonly
        label="城市内涝治理责任人"
      />
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label-align="top"
        readonly
        label="属地镇街责任人"
      />
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label-align="top"
        readonly
        label="管护单位责任人"
      />
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label-align="top"
        readonly
        label="整治责任人"
      />
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label-align="top"
        readonly
        label="中心明白人"
      />
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label-align="top"
        readonly
        label="帮扶专家"
      />
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label-align="top"
        readonly
        label="帮扶专家手机号"
      />
      <div class="special">
        <div class="label">图片附件</div>
        <img src="@/assets/images/workStation/banner.png" height="50" alt="" />
      </div>
      <van-field
        v-model="state.fromData.gdms"
        name="bz"
        label-align="top"
        readonly
        label="备注信息"
      />
    </van-cell-group>
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
const state = reactive({
  fromData: {},
});
</script>

<style lang="less" scoped>
.info-container {
  height: 100%;
  overflow-y: auto;
  :deep(.van-field) {
    width: 100%;
    height: auto;
    padding: 10px;
    .van-field__value {
      background: #f2f2f2;
      height: 40px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      .van-field__body {
        width: 100%;
      }
    }
  }
  .special {
    padding: 10px;
    .label {
      margin-bottom: 10px;
    }
  }
}
</style>
